<template>
  <section class="myForm" v-if="dialogVisible">
    <el-dialog :title="title" :visible="dialogVisible" :before-close="handleClose">
      <el-form :model="forms" :rules="disabled ? editRules : userRules" ref="validateFrom" autoComplete="on" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="forms.name" placeholder="不能输入中文，注册后无法修改" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!disabled">
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="forms.password" placeholder="设置密码" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="真实姓名" prop="truename">
              <el-input v-model="forms.truename"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="forms.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="forms.gender" placeholder="请选择性别">
                <el-option label="男" value="M"></el-option>
                <el-option label="女" value="F"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="forms.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="角色" prop="roleId">
          <el-checkbox-group class="role-checkbox-group" v-model="forms.roleId" :disabled="disabled">
            <el-checkbox v-for="(role, index) in roleArr" :label="role.id" :key="index">{{role.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="dialog-footer">
          <el-button @click="dialogStatus = false">取 消</el-button>
          <el-button type="primary" @click.native.prevent="submitForm">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import { getRoleList } from '@api/system'
  import { validatCheckChinese } from '@utils/validate'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    props: {
      dialogVisible: { type: Boolean }, //表单是否显示
      title: { type: String }, //表单标题
      form: { type: Object }, //表单提交对象
      disabled: { type: Boolean }, //表单元素是否可编辑
      roleArr: { type: Array } //角色数组
    }
  })
  export default class SystemUserTemplate extends Vue {
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!value || (value && value.trim() === "")) {
          callback(new Error('请输入用户名'))
        } else if (!validatCheckChinese(value)) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
      return {
        forms: this.form, //form中间值
        params: { //请求角色对象
          offset: 0,
          limit: 50
        },
        dialogStatus: this.dialogVisible, //表单是否显示状态
        userRules: { //表单rules规则
          name: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
          roleId: [{ required: true, trigger: 'change', message: '请至少选择一个角色' }]
        },
        editRules: { //表单rules规则
          name: [{ required: true, trigger: 'blur', validator: validateUsername }],
          roleId: [{ required: true, trigger: 'change', message: '请至少选择一个角色' }]
        }
      }
    }
    @Watch('form')
    formChange(nv) { //监听form有值
      this.forms = nv;
    }
    @Watch('dialogVisible')
    dialogVisibleChange(val) { //监听dialogVisible改变Status
      this.dialogStatus = val
    }
    @Watch('dialogStatus')
    dialogStatusChange(val) { //关闭的时候触发表单清空
      if (!val) {
        this.$refs.validateFrom.clearValidate();
      }
      this.$emit('update:dialogVisible', val)
    }
    handleClose(done) { //右上角关闭
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogStatus = false
          done()
        })
        .catch(_ => {})
    }
    submitForm() { //回调父组件方法
      this.$refs.validateFrom.validate((valid) => {
        if (valid) {
          let formObj = Object.assign({}, this.forms);
          formObj.roleId = formObj.roleId.join(',');
          this.$emit('submitForm', formObj)
        } else {
          return false;
        }
      });
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@scss/theme/form.scss';
</style>
